<template>
  <div class="satisfaction">
    <module
      ref="module"
      :borderConfig="waterElectricityEnergyMonth.borderConfig"
      :moduleConfig="waterElectricityEnergyMonth.moduleConfig"></module>
    <module
      ref="module1"
      :borderConfig="inspectionMonth.borderConfig"
      :moduleConfig="inspectionMonth.moduleConfig"></module>
    <module
      ref="module2"
      :borderConfig="maintainMonth.borderConfig"
      :moduleConfig="maintainMonth.moduleConfig"></module>
    <module
      ref="module3"
      :borderConfig="waterElectricityEnergyOrgan.borderConfig"
      :moduleConfig="waterElectricityEnergyOrgan.moduleConfig"
      :isShowDimension="waterElectricityEnergyOrgan.isShowDimension"></module>
    <module
      ref="module4"
      :borderConfig="inspectionOrgan.borderConfig"
      :moduleConfig="inspectionOrgan.moduleConfig"
      :isShowDimension="inspectionOrgan.isShowDimension"></module>
    <module
      ref="module5"
      :borderConfig="maintainOrgan.borderConfig"
      :moduleConfig="maintainOrgan.moduleConfig"
      :isShowDimension="maintainOrgan.isShowDimension"></module>
  </div>
</template>

<script>
import module from '../components/SecondaryModule'
import { changeBarData, separateData } from './../../utils/index'
export default {
  components: {
    module
  },
  computed: {
    organId () {
      return this.$store.state.organId
    }
  },
  name: 'satisfaction',
  data () {
    return {
      // 能耗用水趋势配置
      waterElectricityEnergyMonth: {
        borderConfig: {
          moduleType: '43x2',
          icon: '',
          titleText: '能耗用水趋势',
          optionsDirection: 'vertical',
          ref: 'waterElectricityEnergyMonth'
        },
        moduleConfig: [
          {
            optionsConfig: {
              title: {
                text: '水表能耗',
                top: 5,
                left: 40
              },
              axis: {
                yAxisConversion: 'w', // Y轴坐标
                xAxisDataType: 2 // X轴坐标从1月份开始
              },
              yAxis: {
                minInterval: 10
              },
              tooltipsConfig: {
                // symbol: '%',
                isNamePreposition: false,
                tipsColor: ['#f29f46', '#b60d81'],
                tipsMessage: '水表能耗'
              },
              grid: {
                top: 40
              },
              seriesData: []
            },
            legendDirection: 'level',
            legendList: [{ name: new Date().getFullYear() - 1, colorIndex: 2 }, { name: new Date().getFullYear(), colorIndex: 1 }]
          },
          {
            optionsConfig: {
              title: {
                text: '电表能耗',
                top: 5,
                left: 40
              },
              axis: {
                yAxisConversion: 'w', // Y轴坐标
                xAxisDataType: 2 // X轴坐标从1月份开始
              },
              yAxis: {
                minInterval: 10
              },
              tooltipsConfig: {
                // symbol: isTipsSymbol,
                isNamePreposition: false,
                tipsColor: ['#f29f46', '#2e92cb'],
                tipsMessage: '电表能耗'
              },
              grid: {
                top: 40,
                bottom: 20
              },
              seriesData: []
            },
            legendDirection: 'level',
            legendList: [{ name: new Date().getFullYear() - 1, colorIndex: 2 }, { name: new Date().getFullYear(), colorIndex: 0 }]
          }
        ]
      },
      // 巡检指标趋势配置
      inspectionMonth: {
        borderConfig: {
          moduleType: '43x2',
          icon: '',
          titleText: '巡检指标趋势',
          optionsDirection: 'vertical',
          ref: 'inspectionMonth'
        },
        moduleConfig: [
          {
            optionsConfig: {
              title: {
                text: '巡检完成率',
                top: 5,
                left: 40
              },
              axis: {
                yAxisConversion: '%', // Y轴坐标
                xAxisDataType: 2 // X轴坐标从1月份开始
              },
              yAxis: {
                max: 100
              },
              tooltipsConfig: {
                symbol: '%',
                isNamePreposition: false,
                tipsColor: ['#f29f46', '#b60d81'],
                tipsMessage: '巡检完成率'
              },
              grid: {
                top: 40,
                bottom: 20
              },
              seriesData: []
            },
            legendDirection: 'level',
            legendList: [{ name: new Date().getFullYear() - 1, colorIndex: 2 }, { name: new Date().getFullYear(), colorIndex: 1 }]
          },
          {
            optionsConfig: {
              title: {
                text: '巡检及时率',
                top: 5,
                left: 40
              },
              axis: {
                yAxisConversion: '%', // Y轴坐标
                xAxisDataType: 2 // X轴坐标从1月份开始
              },
              yAxis: {
                max: 100
              },
              tooltipsConfig: {
                symbol: '%',
                isNamePreposition: false,
                tipsColor: ['#f29f46', '#b60d81'],
                tipsMessage: '巡检及时率'
              },
              grid: {
                top: 40,
                bottom: 20
              },
              seriesData: []
            },
            legendDirection: 'level',
            legendList: [{ name: new Date().getFullYear() - 1, colorIndex: 2 }, { name: new Date().getFullYear(), colorIndex: 1 }]
          }
        ]
      },
      // 保养指标趋势配置
      maintainMonth: {
        borderConfig: {
          titleText: '保养指标趋势',
          moduleType: '43x2',
          optionsDirection: 'vertical',
          ref: 'maintainMonth'
        },
        moduleConfig: [
          {
            optionsConfig: {
              title: {
                text: '保养完成率',
                top: 5,
                left: 40
              },
              axis: {
                yAxisConversion: '%', // Y轴坐标
                xAxisDataType: 2 // X轴坐标从1月份开始
              },
              yAxis: {
                max: 100
              },
              tooltipsConfig: {
                symbol: '%',
                isNamePreposition: false,
                tipsColor: ['#f29f46', '#b60d81'],
                tipsMessage: '保养完成率'
              },
              grid: {
                top: 40,
                bottom: 20
              },
              seriesData: []
            },
            legendDirection: 'level',
            legendList: [{ name: new Date().getFullYear() - 1, colorIndex: 2 }, { name: new Date().getFullYear(), colorIndex: 1 }]
          },
          {
            optionsConfig: {
              title: {
                text: '保养及时率',
                top: 5,
                left: 40
              },
              axis: {
                yAxisConversion: '%', // Y轴坐标
                xAxisDataType: 2 // X轴坐标从1月份开始
              },
              yAxis: {
                max: 100
              },
              tooltipsConfig: {
                symbol: '%',
                isNamePreposition: false,
                tipsColor: ['#f29f46', '#b60d81'],
                tipsMessage: '保养及时率'
              },
              grid: {
                top: 40,
                bottom: 20
              },
              seriesData: []
            },
            legendDirection: 'level',
            legendList: [{ name: new Date().getFullYear() - 1, colorIndex: 2 }, { name: new Date().getFullYear(), colorIndex: 1 }]
          }
        ]
      },
      // 水电能耗对比配置
      waterElectricityEnergyOrgan: {
        borderConfig: {
          titleText: '水电能耗对比',
          moduleType: '43x1',
          ref: 'waterElectricityEnergyOrgan'
        },
        moduleConfig: {
          optionsConfig: {
            axis: {
              xAxisNameLength: 8,
              yAxisConversion: 'w' // Y轴坐标%
            },
            xAxis: {
              axisLabel: {
                rotate: 30
              },
              data: []
            },
            yAxis: {
              minInterval: 10
            },
            tooltipsConfig: {
              // symbol: '%',
              // tipsColor: ['#f29f46', '#b60d81'],
              isNamePreposition: true
            },
            grid: {
              top: 40,
              bottom: 0
            },
            dataZoom: {
              show: true,
              left: '50%'
            },
            seriesData: []
          },
          legendDirection: 'level',
          legendClassName: true,
          legendList: [{ name: '水表能耗', colorIndex: 0 }, { name: '电表能耗', colorIndex: 1 }]
        },
        isShowDimension: true
      },
      // 巡检指标对比配置
      inspectionOrgan: {
        borderConfig: {
          titleText: '巡检指标对比',
          moduleType: '43x1',
          ref: 'waterElectricityEnergyOrgan'
        },
        moduleConfig: {
          optionsConfig: {
            axis: {
              xAxisNameLength: 8,
              yAxisConversion: '%' // Y轴坐标%
            },
            xAxis: {
              axisLabel: {
                rotate: 30
              },
              data: []
            },
            yAxis: {
              max: 100
            },
            tooltipsConfig: {
              symbol: '%',
              tipsColor: ['#2e92cb', '#f29f46'],
              isNamePreposition: true
            },
            grid: {
              top: 40,
              bottom: 0
            },
            dataZoom: {
              show: true,
              left: '50%'
            },
            seriesData: []
          },
          legendDirection: 'level',
          legendClassName: true,
          legendList: [{ name: '巡检完成率', colorIndex: 0 }, { name: '巡检及时率', colorIndex: 2 }]
        },
        isShowDimension: true
      },
      // 保养指标对比配置
      maintainOrgan: {
        borderConfig: {
          titleText: '保养指标对比',
          moduleType: '43x1',
          ref: 'maintainOrgan'
        },
        moduleConfig: {
          optionsConfig: {
            axis: {
              xAxisNameLength: 8,
              yAxisConversion: '%' // Y轴坐标%
            },
            xAxis: {
              axisLabel: {
                rotate: 30
              },
              data: []
            },
            yAxis: {
              max: 100
            },
            tooltipsConfig: {
              symbol: '%',
              tipsColor: ['#f29f46', '#b60d81'],
              isNamePreposition: true
            },
            grid: {
              top: 40,
              bottom: 0
            },
            dataZoom: {
              show: true,
              left: '50%'
            },
            seriesData: []
          },
          legendDirection: 'level',
          legendClassName: true,
          legendList: [{ name: '保养完成率', colorIndex: 2 }, { name: '保养及时率', colorIndex: 1 }]
        },
        isShowDimension: true
      }
    }
  },
  methods: {
    showTips (data) {
      this.$parent.showTips(data)
    },
    // 改变时间维度时
    changeDimension (obj) {
      switch (obj.ref) {
        case 'waterElectricityEnergyOrgan': this.getWaterAndElectricityConsumptionContrastByCompany(obj.index + 1)
          break
        case 'inspectionOrgan': this.getDtRateByTypeAndCompany('1000', obj.index + 1)
          break
        case 'maintainOrgan': this.getDtRateByTypeAndCompany('2000', obj.index + 1)
          break
      }
    },
    // 水能数据获取
    getWaterConsumptionContrast () {
      this.equipmentApi.getWaterConsumptionContrast({ organId: this.organId }).then(res => {
        let data = [[], []]
        if (res.data.code === '0') {
          data = changeBarData(res.data.data, 'amount')
        } else {
          this.showTips({ showMessage: '请求失败，点击确认继续刷新', sureCallback: this.getData })
        }
        this.waterElectricityEnergyMonth.moduleConfig[0].optionsConfig.seriesData = [
          {
            data: data[0],
            name: new Date().getFullYear() - 1 + '年',
            colorIndex: 2
          },
          {
            data: data[1],
            name: new Date().getFullYear() + '年',
            colorIndex: 1
          }
        ]
      }, res => {
        this.waterElectricityEnergyMonth.moduleConfig[0].optionsConfig.seriesData = [
          {
            data: [],
            name: new Date().getFullYear() - 1 + '年',
            colorIndex: 2
          },
          {
            data: [],
            name: new Date().getFullYear() + '年',
            colorIndex: 1
          }
        ]
        this.showTips({ showMessage: '请求失败，点击确认继续刷新', sureCallback: this.getData })
      })
    },
    // 电能数据获取
    getElectricityConsumptionContrast () {
      this.equipmentApi.getElectricityConsumptionContrast({ organId: this.organId }).then(res => {
        let data = [[], []]
        if (res.data.code === '0') {
          data = changeBarData(res.data.data, 'amount')
        } else {
          this.showTips({ showMessage: '请求失败，点击确认继续刷新', sureCallback: this.getData })
        }
        this.waterElectricityEnergyMonth.moduleConfig[1].optionsConfig.seriesData = [
          {
            data: data[0],
            name: new Date().getFullYear() - 1 + '年',
            colorIndex: 2
          },
          {
            data: data[1],
            name: new Date().getFullYear() + '年',
            colorIndex: 0
          }
        ]
      }, res => {
        this.waterElectricityEnergyMonth.moduleConfig[1].optionsConfig.seriesData = [
          {
            data: [],
            name: new Date().getFullYear() - 1 + '年',
            colorIndex: 2
          },
          {
            data: [],
            name: new Date().getFullYear() + '年',
            colorIndex: 0
          }
        ]
        this.showTips({ showMessage: '请求失败，点击确认继续刷新', sureCallback: this.getData })
      })
    },
    // 设备巡检/保养完成率
    getDtFinishRateByType (type = '1000') {
      let objName = type === '1000' ? 'inspectionMonth' : 'maintainMonth'
      this.equipmentApi.getDtFinishRateByType({ organId: this.organId, dtType: type }).then(res => {
        let data = [[], []]
        if (res.data.code === '0') {
          data = changeBarData(res.data.data, 'rate')
        } else {
          this.showTips({ showMessage: '请求失败，点击确认继续刷新', sureCallback: this.getData })
        }
        this[objName].moduleConfig[0].optionsConfig.seriesData = [
          {
            data: data[0],
            name: new Date().getFullYear() - 1 + '年',
            colorIndex: 2
          },
          {
            data: data[1],
            name: new Date().getFullYear() + '年',
            colorIndex: 1
          }
        ]
      }, res => {
        this[objName].moduleConfig[0].optionsConfig.seriesData = [
          {
            data: [],
            name: new Date().getFullYear() - 1 + '年',
            colorIndex: 2
          },
          {
            data: [],
            name: new Date().getFullYear() + '年',
            colorIndex: 1
          }
        ]
        this.showTips({ showMessage: '请求失败，点击确认继续刷新', sureCallback: this.getData })
      })
    },
    // 设备巡检/保养及时率
    getDtTimelyRateByType (type = '1000') {
      let objName = type === '1000' ? 'inspectionMonth' : 'maintainMonth'
      this.equipmentApi.getDtTimelyRateByType({ organId: this.organId, dtType: type }).then(res => {
        let data = [[], []]
        if (res.data.code === '0') {
          data = changeBarData(res.data.data, 'rate')
        } else {
          this.showTips({ showMessage: '请求失败，点击确认继续刷新', sureCallback: this.getData })
        }
        this[objName].moduleConfig[1].optionsConfig.seriesData = [
          {
            data: data[0],
            name: new Date().getFullYear() - 1 + '年',
            colorIndex: 2
          },
          {
            data: data[1],
            name: new Date().getFullYear() + '年',
            colorIndex: 1
          }
        ]
      }, res => {
        this[objName].moduleConfig[1].optionsConfig.seriesData = [
          {
            data: [],
            name: new Date().getFullYear() - 1 + '年',
            colorIndex: 2
          },
          {
            data: [],
            name: new Date().getFullYear() + '年',
            colorIndex: 1
          }
        ]
        this.showTips({ showMessage: '请求失败，点击确认继续刷新', sureCallback: this.getData })
      })
    },
    // 水电能公司对比
    getWaterAndElectricityConsumptionContrastByCompany (timeDimensionIndex) {
      let timeDimension = 1
      if (timeDimensionIndex) {
        timeDimension = timeDimensionIndex
      }
      this.equipmentApi.getWaterAndElectricityConsumptionContrastByCompany({ organId: this.organId, timeDimension: timeDimension }).then(res => {
        let data = []
        let data1 = []
        let name = []
        if (res.data.code === '0') {
          let obj = separateData(res.data.data, ['waterAmount', 'electricityAmount'])
          data = obj.data
          data1 = obj.data1
          name = obj.tipsName
        } else {
          this.showTips({ showMessage: '请求失败，点击确认继续刷新', sureCallback: this.getData })
        }
        this.waterElectricityEnergyOrgan.moduleConfig.optionsConfig.xAxis.data = name
        this.waterElectricityEnergyOrgan.moduleConfig.optionsConfig.seriesData = [
          {
            data: data,
            name: '水表能耗',
            colorIndex: 0,
            isBar: true
          },
          {
            data: data1,
            name: '电表能耗',
            colorIndex: 1,
            isBar: true
          }
        ]
      }, res => {
        this.waterElectricityEnergyOrgan.moduleConfig.optionsConfig.xAxis.data = []
        this.waterElectricityEnergyOrgan.moduleConfig.optionsConfig.seriesData = [
          {
            data: [],
            name: '水表能耗',
            colorIndex: 0,
            isBar: true
          },
          {
            data: [],
            name: '电表能耗',
            colorIndex: 1,
            isBar: true
          }
        ]
        this.showTips({ showMessage: '请求失败，点击确认继续刷新', sureCallback: this.getData })
      })
    },
    //  设备巡检/保养分公司对比
    getDtRateByTypeAndCompany (type, timeDimensionIndex) {
      let timeDimension = 1
      if (timeDimensionIndex) {
        timeDimension = timeDimensionIndex
      }
      this.equipmentApi.getDtRateByTypeAndCompany({ organId: this.organId, timeDimension: timeDimension, dtType: type }).then(res => {
        let data = []
        let data1 = []
        let name = []
        if (res.data.code === '0') {
          let obj = separateData(res.data.data, ['finishRate', 'timelyRate'])
          data = obj.data
          data1 = obj.data1
          name = obj.tipsName
        } else {
          this.showTips({ showMessage: '请求失败，点击确认继续刷新', sureCallback: this.getData })
        }
        if (type === '1000') {
          this.inspectionOrgan.moduleConfig.optionsConfig.xAxis.data = name
          this.inspectionOrgan.moduleConfig.optionsConfig.seriesData = [
            {
              data: data,
              name: '巡检完成率',
              colorIndex: 0,
              isBar: true
            },
            {
              data: data1,
              name: '巡检及时率',
              colorIndex: 2,
              isBar: true
            }
          ]
        } else {
          this.maintainOrgan.moduleConfig.optionsConfig.xAxis.data = name
          this.maintainOrgan.moduleConfig.optionsConfig.seriesData = [
            {
              data: data,
              name: '保养完成率',
              colorIndex: 2,
              isBar: true
            },
            {
              data: data1,
              name: '保养及时率',
              colorIndex: 1,
              isBar: true
            }
          ]
        }
      }, res => {
        if (type === '1000') {
          this.inspectionOrgan.moduleConfig.optionsConfig.xAxis.data = []
          this.inspectionOrgan.moduleConfig.optionsConfig.seriesData = [
            {
              data: [],
              name: '巡检完成率',
              colorIndex: 0,
              isBar: true
            },
            {
              data: [],
              name: '巡检及时率',
              colorIndex: 2,
              isBar: true
            }
          ]
        } else {
          this.maintainOrgan.moduleConfig.optionsConfig.xAxis.data = name
          this.maintainOrgan.moduleConfig.optionsConfig.seriesData = [
            {
              data: [],
              name: '保养完成率',
              colorIndex: 2,
              isBar: true
            },
            {
              data: [],
              name: '保养及时率',
              colorIndex: 1,
              isBar: true
            }
          ]
        }
        this.showTips({ showMessage: '请求失败，点击确认继续刷新', sureCallback: this.getData })
      })
    },
    // 请求数据
    getData () {
      this.getWaterConsumptionContrast()
      this.getElectricityConsumptionContrast()
      this.getDtFinishRateByType('1000')
      this.getDtTimelyRateByType('1000')
      this.getDtFinishRateByType('2000')
      this.getDtTimelyRateByType('2000')
      this.getWaterAndElectricityConsumptionContrastByCompany()
      this.getDtRateByTypeAndCompany('1000')
      this.getDtRateByTypeAndCompany('2000')
    },
    resizeChart () {
      this.$refs.module.resizeChart()
      this.$refs.module1.resizeChart()
      this.$refs.module2.resizeChart()
      this.$refs.module3.resizeChart()
      this.$refs.module4.resizeChart()
      this.$refs.module5.resizeChart()
    }
  },
  mounted () {
    // this.getData()
  }
}
</script>

<style lang="scss" scoped>
  .satisfaction{
    width: calc(100% - 10px);
    position: relative;
    margin: 5px;
    overflow: hidden;
    moz-user-select: -moz-none;
    -moz-user-select: none;
    -o-user-select:none;
    -khtml-user-select:none;
    -webkit-user-select:none;
    -ms-user-select:none;
    user-select:none;
  }
</style>
